<template>
  <div>
    <!--顶部固定导航-->
    <div class="head">
      聊天室(<span id="count">{{count}}</span>)
    </div>
    <!--聊天记录-->
    <div class="chat-container" id="chat-container">
      <div class="notify-container" v-for="(item,index) in actions" :key="index+100">
        <div class="notify">
          <span class="name">{{item.name}}</span>
          {{item.action}}
        </div>
      </div>
      <div class="message-self" v-for="(item,index) in selfMessage" :key="index">
        <div class="message-container" v-if="item.name===userInfo.nick">
          <div class="message-content">
            <div class="time">{{item.time}}</div>
            <div class="name">{{item.name}}</div>
            <div class="message">{{item.msg}}</div>
          </div>
          <div class="icon">
            <img :src="avatarUrl" />
          </div>
        </div>
        <div class="message-other" v-else>
          <div class="message-container">
            <div class="icon">
              <img :src="avatarUrl" />
            </div>
            <div class="message-content">
              <div class="time">{{item.time}}</div>
              <div class="name">{{item.name}}</div>
              <div class="message">{{item.msg}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--底部输入框-->
    <div class="input-container">
      <div class="input-content">
        <input autofocus="autofocus" v-model="msg" placeholder="请输入聊天内容…" @keydown="handleKeydown" />
        <div class="num">{{msg.length}}/30</div>
      </div>
      <div class="send" @click="sendMessage()">发送</div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from "@/api/user/index";
import { getToken } from "@/libs/util";
import LeftMenu from "@/components/menu/index";

export default {
  name: "home",
  components: { LeftMenu },
  data() {
    return {
      userInfo: {},
      avatarUrl: "static/images/avatar-1.jpg",
      msg: "",
      id: "",
      count: 0,
      selfMessage: [],
      actions: [],
      i:0
    };
  },
  methods: {
    getData(data) {
      getUserInfo(data).then(res => {
        this.userInfo = res.data.data;
      });
    },
    sendMessage() {
      if (this.msg.length <= 0) {
        return;
      }
      this.$socket.emit("message", {
        name: this.userInfo.nick,
        msg: this.msg,
        username: this.userInfo.username
      });
      this.msg = "";
    },
    handleKeydown(e) {
      if (e.keyCode === 13) {
        this.sendMessage();
      }
    }
  },
  created() {
    var token = getToken();
    if (token) {
      this.userInfo.nick = token;
      this.getData(token);
    } else {
      this.$router.push("/login");
    }
    this.$socket.emit("join", { name: this.userInfo.nick });
  },
  mounted() {
    this.$socket.emit("connect");
    this.$socket.emit("join", { name: this.userInfo.nick });
  },
  watch: {
    $route: function(route) {
      console.log(route.name);
      if (route.name == "chat") {
        var token = getToken();
        if (token) {
          this.userInfo.nick = token;
          this.getData(token);
        } else {
          this.$router.push("/login");
        }
        this.$socket.emit("join", { name: this.userInfo.nick });
      }
    }
  },
  sockets: {
    //不能改,建立连接自动调用connect
    connect() {
      console.log("connect");
    },
    joinNoticeSelf(data) {
      this.count = data.count;
    },
    message(data) {
      this.selfMessage.push(data);
    },
    disconnect(data) {
      this.actions.push(data);
    }
  },
  updated: function() {
    this.$socket.emit("join", { name: this.userInfo.nick });
    this.$nextTick(function() {
      var div = document.getElementById("chat-container");
      div.scrollTop = div.scrollHeight;
    });
  }
};
</script>



<style>
.head {
  height: 50px;
  line-height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  font-size: 22px;
  font-weight: bold;
}

.chat-container {
  padding: 10px;
  height: 700px;
  overflow-y: scroll;
  background-color: #f5f5f5;
  /*background-image: url(http://tool.uixsj.cn/qchan/uploads/2018/08/traffic_a_lot_of_cars_driving_across_the_golden_gate_bridge_free_stock_photos_picjumbo_HNCK2899_2210x1474.jpg);
  */
  box-sizing: border-box;
}

/*滚动条样式*/

.chat-container::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}

.chat-container::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 2rem;
  /*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
  background-color: #aaaaaa;
}

.chat-container::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
  border-radius: 2rem;
  background-color: transparent;
}

.chat-container .message-self,
.chat-container .message-other {
  padding: 10px;
  box-sizing: border-box;
}

.chat-container .message-self {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.chat-container .message-other {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /*justify-content: flex-start;*/
}

.chat-container .message-container {
  max-width: 80%;
  /*height: auto;*/
  display: flex;
  flex-direction: row;
  /*box-sizing: border-box;*/
}

.chat-container .message-self .message-container .message-content {
  padding-right: 10px;
}

.chat-container .message-other .message-container .message-content {
  padding-left: 10px;
}

.right
  .chat-container
  .message-self
  .message-container
  .message-content
  .message {
  background-color: blue;
  color: white;
}

.right
  .chat-container
  .message-other
  .message-container
  .message-content
  .message {
  background-color: white;
  color: black;
}

.chat-container .message-container .message-content .name {
  font-size: 16px;
  padding: 5px 0;
  color: #888888;
}

.chat-container .message-self .message-container .message-content .name {
  font-size: 16px;
  text-align: right;
}

.chat-container .message-container .time {
  font-size: 16px;
  padding: 0px 0;
  color: #888888;
}

.chat-container .message-self .message-container .time {
  font-size: 16px;
  text-align: right;
}

.right
  .chat-container
  .message-other
  .message-container
  .message-content
  .name {
  text-align: left;
}

.chat-container .message-container .message-content .message {
  border-radius: 10px;
  padding: 10px;
}

.chat-container .message-container .icon img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
}

.chat-container .notify-container {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-container .notify-container .notify {
  border-radius: 10px;
  padding: 5px 10px;
  background-color: #999999;
  opacity: 0.9;
  font-size: 12px;
  color: white;
}

.input-container {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  background-color: blue;
  font-size: 18px;
}

.input-container .input-content {
  position: relative;
  width: 85%;
  background-color: white;
}

.input-container .input-content input {
  border: 0;
  padding: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* 去除input框外边框  */
  outline: none;
  font-size: 18px;
}

.input-container .input-content .num {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 1)
  );
  font-weight: bold;
  color: #333333;
}

.input-container .input-content input::-webkit-input-placeholder {
  font-size: 18px;
}

.input-container .send {
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
  font-weight: bold;
}
</style>